<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <link rel="shortcut icon" href="favicon.png"/>
    <meta name="mobile-web-app-capable" content="yes"/>
    <link rel="icon" sizes="192x192" href="favicon.png"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="apple-touch-icon-precomposed" href="favicon.png"/>

    <title>幼儿数学题库</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <style>
        .nav {
            top: 0;
            right: 0;
            z-index: 3;
            height: 2.2rem;
            padding-right: .5rem;
            padding-left: .5rem;
            background-color: #f7f7f8;
            backface-visibility: hidden;
            position: absolute;
            left: 0;
        }
        .nav .title {
            position: absolute;
            left: 0;
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            font-size: .85rem;
            font-weight: 500;
            line-height: 2.2rem;
            color: #3d4145;
            text-align: center;
            white-space: nowrap;
        }
        .weui-progress__bar{
            margin-bottom: 20px;
        }
        .weui-progress__inner-bar{
            display: inline-block;
            float: left;
        }
        .weui-progress__inner-bar.error-bar{
            background-color: #d14;
        }
        .ti-result{
            font-size: 60px;
            height: 140px;
            line-height: 140px;
            border: 1px solid #aaa;
            text-align: center;
            width: 100%;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="jia-jian-fa" v-cloak>
    <nav class="nav">
        <h1 class="title">幼儿数学题库</h1>
    </nav>
    <section style="margin-top: 2.2rem;">
        <div id="config" v-if="section == 'config'" class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">数量</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" pattern="[0-9]*" placeholder="题目数量" v-model="count">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">出题范围</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" pattern="[0-9]*" placeholder="多少以内的题" v-model="max">
                </div>
            </div>
            <div class="weui-cells_checkbox">
                <label class="weui-cell weui-check__label" for="s11">
                    <div class="weui-cell__hd">
                        <input type="checkbox" class="weui-check" id="s11" value="1" v-model="types">
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p>加法 (+)</p>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="s22">
                    <div class="weui-cell__hd">
                        <input type="checkbox" class="weui-check" id="s22" value="2" v-model="types">
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p>减法 (-)</p>
                    </div>
                </label>
            </div>
            <a href="javascript:;" class="weui-btn weui-btn_primary" @click="startDoing">出题</a>
        </div>

        <div id="doing" v-if="section == 'doing'">
            <div class="weui-msg">
                <div class="weui-msg__text-area">
                    <h2 class="weui-msg__title">第{{currentIdx + 1}}题，共{{count}}题</h2>
                    <div class="weui-progress">
                        <div class="weui-progress__bar">
                            <div class="weui-progress__inner-bar js_progress" :style="{width: rightPercent}"></div>
                            <div class="weui-progress__inner-bar js_progress error-bar" :style="{width: errorPercent}"></div>
                        </div>
                    </div>
                    <p class="weui-msg__desc">
                        <span style="font-size: 40px">
                            <span>{{current.var1}} {{current.method}} {{current.var2}} = ? </span>
                        </span>
                    </p>
                    <p class="weui-msg__desc">
                        <input type="number" placeholder="____" class="ti-result" v-model="current.result" @keyup.enter="nextQuestion">
                    </p>
                </div>
                <div class="weui-msg__opr-area">
                    <p class="weui-btn-area">
                        <a v-if="currentIdx != 0" href="javascript:;" class="weui-btn weui-btn_inline weui-btn_default" @click="preQuestion">上一题</a>
                        <a v-if="showSubmit == false" href="javascript:;" class="weui-btn weui-btn_inline weui-btn_primary" @click="nextQuestion">下一题</a>
                        <a v-if="showSubmit" href="javascript:;" class="weui-btn weui-btn_inline weui-btn_warn" @click="submit">提交试卷</a>
                    </p>
                </div>
                <div class="weui-msg__extra-area">
                    <div class="weui-footer">
                        <p class="weui-footer__links">
                            <a href="javascript:void(0);" class="weui-footer__link">有问题请联系微信：desertsurge</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="result" v-if="section == 'result'">
            <div class="weui-msg">
                <div class="weui-msg__icon-area"><i :class="resultIcon"></i></div>
                <div class="weui-msg__text-area">
                    <h2 class="weui-msg__title">{{score}}分</h2>
                    <p class="weui-msg__desc">共{{count}}题，正确{{right}}题</p>
                    <p class="weui-msg__desc">{{resultMsg}}</p>
                </div>
                <div class="weui-msg__opr-area">
                    <div class="weui-btn-area">
                        <a v-if="score != 100" href="javascript:;" class="weui-btn weui-btn_default" @click="switchSection('error')">查看错题</a>
                        <a href="javascript:;" class="weui-btn weui-btn_default" @click="reset">再做一次</a>
                        <a href="javascript:;" v-if="isWx" class="weui-btn weui-btn_primary" @click="shareTo()">分享给其他小朋友</a>
                    </div>
                    <div class="weui-btn-area">
                        <img id="share-qrcode-image" alt="分享二维码" style="width: 60%" src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQEJ8TwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyclVKSDFFdU9iZ1QxMDAwMHcwN0kAAgQPi2RaAwQAAAAA"/>
                        <div>长按关注</div>
                    </div>
                </div>
            </div>
        </div>


        <div id="error" v-if="section == 'error'">
            <div class="weui-cells">
                <div v-for="(ti, idx) in tiku" v-if="ti.result != ti.expect" class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>{{ti.var1}} {{ti.method}} {{ti.var2}} = {{ti.result}}</p>
                    </div>
                    <div class="weui-cell__ft" @click="showTiExpect(ti.id)"  v-show="ti.show == false">
                        查看正确答案
                    </div>
                    <div class="weui-cell__ft">
                        <span v-show="ti.show">{{ti.expect}}</span>
                    </div>
                </div>
            </div>
            <div class="weui-msg__opr-area">
                <p class="weui-btn-area">
                    <a href="javascript:;" class="weui-btn weui-btn_default" @click="switchSection('result')">返回</a>
                </p>
            </div>
        </div>

    </section>
<div class="control-btns" style="display: none;">
    <div class='controll-span'><label>数量: <input type="number" class="input" name="count" id="count" value="40"></label></div>
    <div class='controll-span'><label>几以内: <input type="number" class="input" name="max" id="max" value="10"></label></div>
    <div class='controll-span'>
        <label><input type="checkbox" name="type" value="1" checked>加法</label>
        <label><input type="checkbox" name="type" value="2">减法</label>
        <label><input type="checkbox" name="type" value="3">乘法</label>
        <label><input type="checkbox" name="type" value="4">除法</label>
    </div>
    <div class='controll-span'>
        <button class="btn btn-primary" onclick="generate()">生成</button>
        <button class="btn btn-danger" onclick="testResult()">打分</button>
        <button class="btn btn-warning" onclick="printWindow()">打印</button>
        <span id="score"></span>
    </div>
</div>
</div>
<script>
    //layer.msg('hello');
</script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="lib/underscore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script v-if="isWx" type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>